import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import {setSpText} from '../component/ScreenUtil';
import StorageTools from '../component/StorageTools';
import Slider from '@react-native-community/slider';

export default class DisplaySlider extends Component {


	constructor(props) {
		super(props);
		this.state={
			fontSize:setSpText(37)
		}
	}

	componentDidMount(){
		// this.props.navigation.setOptions({
		// 	title: '字体样式',
		// })
		StorageTools.get('fontSize',37).then((result)=>{
			if(result){
				this.setState({
					fontSize:parseFloat(result),
				});
			}

		}).catch((err)=>{

		})
	}

	render() {
		return (
		  <View style = {styles.container}>
			<View style={styles.title_view}>
			  <Text style={{fontSize:setSpText(this.state.fontSize),color:'black'}}>
				调整后请退出重新登录以生效
			  </Text>
			</View>
			<View style={styles.view_layout}>
			  <Slider
				style = {styles.slide}
				maximumValue = {100}
				minimumValue = {25}
				step = {1}
				value = {this.state.fontSize}
				onSlidingComplete = {(value) => {
					this.setState({fontSize: value})
					StorageTools.save('fontSize',String(value));
				}}
			  />
			  <Text>滑移上方的滑块</Text>
			</View>
		  </View>
		);
	}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  title_view:{
    flexDirection:'row',
    height:100,
    justifyContent: 'center',
    alignItems: 'center',
  },
  view_layout: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

    },
  slide: {
    width: 200
  }
});
